<template>
	<view class="wrap">
		<view class="body">
			<view class="between">
				<view>当前车牌号</view>
				<view class="bold">{{plateNum}}</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="text">主驾驶员</view>
					<view class="set" @click="goAdd(1)">
						<text style="margin-right: 6rpx;" v-text="mainInfo.length ? '去修改' : '去添加'"></text>
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
				<view class="box" v-if="mainInfo.length">
					<view>{{mainInfo[0].name}} | {{mainInfo[0].mobile}}</view>
					<!-- <view class="clear">清除司机</view> -->
				</view>
				<view class="empty" v-else>暂未关联主驾驶员</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="text">副驾驶员</view>
					<view class="set" @click="goAdd(2)">
						<text style="margin-right: 6rpx;" v-text="copilotInfo.length ? '去修改' : '去添加'"></text>
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
				<view class="box" v-if="copilotInfo.length"  v-for="(item,index) in copilotInfo" :key="index">
					<!-- <view>{{copilotInfo[0].name}} | {{copilotInfo[0].mobile}}</view> -->
					<view>
						{{item.name}} | {{item.mobile}}
					</view>
					<view class="clear" @click="clearDriver(item,index)">清除司机</view>
				</view>
				<view class="empty" v-else>暂未关联副驾驶员</view>
			</view>
		</view>
		<u-modal :show="showModal1" content='确定取消司机关联吗？' :closeOnClickOverlay="true" @confirm="confirm1"
			@cancel="showModal1 = false" @close="showModal1 = false" :showCancelButton="true"></u-modal>

		<u-modal :show="showModal" content='确定要将勾选的项目取消关联吗？' :closeOnClickOverlay="true" @confirm="confirm"
			@cancel="showModal = false" @close="showModal = false" :showCancelButton="true"></u-modal>

	</view>
</template>

<script>
	import {
		updateProject,
		updateVehicle,
		driverAanVehicle 
	} from '@/config/api/app.js'
	export default {
		data() {
			return {
				showModal: false,
				showModal1: false,
				plateNum: '',
				driverVehicle: [],
				vehicleId: '',
				
				mainInfo: [],
				copilotInfo: [],
				clearInfo: {},//清除的司机信息
				index: null,//清除的下标
				
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			this.driverVehicle = data.driverVehicle
			this.plateNum = data.plateNum
			this.vehicleId = data.vehicleId
			if (this.driverVehicle.length) {
				this.mainInfo = this.driverVehicle.filter(item => {
					return item.isDefault == 1
				})
				// this.copilotInfo = this.driverVehicle.filter(item => {
				// 	return item.isDefault == 0
				// })
				// let arr = []
				this.driverVehicle.forEach(item => {
					if( item.isDefault == 0){
						console.log(item)
						 this.copilotInfo.push(item)
					}
				})
				
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goAdd(type, info) {
				console.log(this.copilotInfo,this.mainInfo)
				let obj = {
					type,
					info: [...this.mainInfo, ...this.copilotInfo],
					vehicleId: this.vehicleId
				}
				let data = JSON.stringify(obj)
				uni.navigateTo({
					url: `./add?data=${data}`
				})
			},
			//点击确定清楚按钮
			confirm1(){
				// console.log(this.copilotInfo[this.index], this.clearInfo)
				// return false
				driverAanVehicle({
					driverVehicleId: this.copilotInfo[this.index].driver_vehicle_id
				}).then((res) => {
					this.showModal1 = false
					if (res.code == 0) {
						uni.$u.toast('清除司机成功');
						this.copilotInfo.splice(this.index,1)
						this.driverVehicle.splice(this.index,1)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//清除单个的副驾驶员
			clearDriver(item,index){
				this.clearInfo = item
				this.index = index
				this.showModal1 = true
			},
			//	取消关联
			postUpdateProject() {
				let obj = {
					driverId: this.driver_id,
					projects: this.allId.filter(item => {
						return !this.checkboxValue.find(prop => {
							return prop === item
						})
					})
				}
				updateProject(obj, {
					custom: {
						title: '取消关联中……'
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.$u.toast('取消关联成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			confirm() {
				this.showModal = false
				this.postUpdateProject()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.u-border-bottom {
		border-bottom: 1rpx solid #F5F7FB;

		&:last-child {
			border-bottom: none;
		}
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 0 calc(env(safe-area-inset-bottom));
	}


	.body {
		width: 100wh;
		height: 100%;
		overflow: auto;
		background: #FAFAFA;

		.between {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			padding: 24rpx 32rpx;
			background: #fff;
			margin: 24rpx 0;

			.bold {
				font-weight: 500;
			}
		}

		.content {
			padding: 0 32rpx 12rpx;
			background: #fff;
			margin-bottom: 20rpx;
		}

		.item {
			background: #fff;
			margin-bottom: 24rpx;

			.box {
				padding: 24rpx 32rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid #F5F7FB;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;

				.clear {
					// display: none;
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
					padding: 6rpx 12rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
				}
			}

			.empty {
				border-top: 1rpx solid #F5F7FB;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #9E9E9E;
				padding: 24rpx 0;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx 24rpx 0;

			.set {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #9E9E9E;
				padding-left: 24rpx;
			}

			.text {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				position: relative;
				padding-left: 32rpx;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 10rpx;
					width: 8rpx;
					height: 32rpx;
					background: #003E81;
				}
			}
		}
	}

</style>
